﻿@page "/components/list"
<PageHeader Title="List 列表">
    列表用一个连续的列来显示多行元素，常用于具有相同构成及内容的模块批量展示，可承载多样化的信息内容，从纯文字到复杂的图文组合。
</PageHeader>
<Example Title="示例" RunStyle="@Code.BgRun">
    <Description></Description>
    <RunContent>
        <List>
            <ListItem>列表内容的描述性文字</ListItem>
            <ListItem>列表内容的描述性文字</ListItem>
            <ListItem>列表内容的描述性文字</ListItem>
        </List>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```html
<List>
    <ListItem>列表内容的描述性文字</ListItem>
    <ListItem>列表内容的描述性文字</ListItem>
    <ListItem>列表内容的描述性文字</ListItem>
</List>
```
")
    </CodeContent>
</Example>
<Example Title="基础文字列表" RunStyle="@Code.BgRun">
    <Description>仅包含简单文字的列表。对较简单的信息进行陈列时使用。</Description>
    <RunContent>
        <List>
            <ListItem>
                <ChildContent>列表内容的描述性文字</ChildContent>
                <OperationContent>
                    <Space>
                        <SpaceItem><Button>操作</Button></SpaceItem>
                        <SpaceItem><Button>操作</Button></SpaceItem>
                        <SpaceItem><Button>操作</Button></SpaceItem>
                    </Space>
                </OperationContent>
            </ListItem>
            <ListItem>
                <ChildContent>列表内容的描述性文字</ChildContent>
                <OperationContent>
                    <Space>
                        <SpaceItem><Button>操作</Button></SpaceItem>
                        <SpaceItem><Button>操作</Button></SpaceItem>
                        <SpaceItem><Button>操作</Button></SpaceItem>
                    </Space>
                </OperationContent>
            </ListItem>
            <ListItem>
                <ChildContent>列表内容的描述性文字</ChildContent>
                <OperationContent>
                    <Space>
                        <SpaceItem><Button>操作</Button></SpaceItem>
                        <SpaceItem><Button>操作</Button></SpaceItem>
                        <SpaceItem><Button>操作</Button></SpaceItem>
                    </Space>
                </OperationContent>
            </ListItem>
        </List>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```html
<List>
    <ListItem>
        <ChildContent>列表内容的描述性文字</ChildContent>
        <OperationContent>
            <Space>
                <SpaceItem><Button>操作</Button></SpaceItem>
                <SpaceItem><Button>操作</Button></SpaceItem>
                <SpaceItem><Button>操作</Button></SpaceItem>
            </Space>
        </OperationContent>
    </ListItem>
    <ListItem>
        <ChildContent>列表内容的描述性文字</ChildContent>
        <OperationContent>
            <Space>
                <SpaceItem><Button>操作</Button></SpaceItem>
                <SpaceItem><Button>操作</Button></SpaceItem>
                <SpaceItem><Button>操作</Button></SpaceItem>
            </Space>
        </OperationContent>
    </ListItem>
    <ListItem>
        <ChildContent>列表内容的描述性文字</ChildContent>
        <OperationContent>
            <Space>
                <SpaceItem><Button>操作</Button></SpaceItem>
                <SpaceItem><Button>操作</Button></SpaceItem>
                <SpaceItem><Button>操作</Button></SpaceItem>
            </Space>
        </OperationContent>
    </ListItem>
</List>
```
")
    </CodeContent>
</Example>
<Example Title="多行文字列表" RunStyle="@Code.BgRun">
    <Description>仅包含主要文字及描述性文字的列表。对较复杂的，包含多个字段或内容的信息进行展示时使用。</Description>
    <RunContent>
        <List>
            <ListItem>
                <TitleContent>这里是标题</TitleContent>
                <ChildContent>这里是文字描述</ChildContent>
            </ListItem>
            <ListItem>
                <TitleContent>这里是标题</TitleContent>
                <ChildContent>这里是文字描述</ChildContent>
            </ListItem>
            <ListItem>
                <TitleContent>这里是标题</TitleContent>
                <ChildContent>这里是文字描述</ChildContent>
            </ListItem>
        </List>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```html
<List>
    <ListItem>
        <TitleContent>这里是标题</TitleContent>
        <ChildContent>这里是文字描述</ChildContent>
    </ListItem>
    <ListItem>
        <TitleContent>这里是标题</TitleContent>
        <ChildContent>这里是文字描述</ChildContent>
    </ListItem>
    <ListItem>
        <TitleContent>这里是标题</TitleContent>
        <ChildContent>这里是文字描述</ChildContent>
    </ListItem>
</List>
```
")
    </CodeContent>
</Example>
<Example Title="带分隔线的列表" RunStyle="@Code.BgRun">
    <Description>设置 <code>Split</code> 使列表项之间有分割线</Description>
    <RunContent>
        <List Split>
            <ListItem>列表内容的描述性文字</ListItem>
            <ListItem>列表内容的描述性文字</ListItem>
            <ListItem>列表内容的描述性文字</ListItem>
        </List>
    </RunContent>
    <CodeContent>
@Code.Create(@"
```html
<List Split>
    <ListItem>列表内容的描述性文字</ListItem>
    <ListItem>列表内容的描述性文字</ListItem>
    <ListItem>列表内容的描述性文字</ListItem>
</List>
```
")
    </CodeContent>
</Example>

<Example Title="带间隔色的列表" RunStyle="@Code.BgRun">
    <Description>设置 <code>Stripe</code> 使列表项之间有间隔色</Description>
    <RunContent>
        <List Stripe>
            <ListItem>列表内容的描述性文字</ListItem>
            <ListItem>列表内容的描述性文字</ListItem>
            <ListItem>列表内容的描述性文字</ListItem>
            <ListItem>列表内容的描述性文字</ListItem>
        </List>
    </RunContent>
    <CodeContent>
@Code.Create(@"
```html
<List Stripe>
    <ListItem>列表内容的描述性文字</ListItem>
    <ListItem>列表内容的描述性文字</ListItem>
    <ListItem>列表内容的描述性文字</ListItem>
    <ListItem>列表内容的描述性文字</ListItem>
</List>
```
")
    </CodeContent>
</Example>
<Example Title="基础图文列表" RunStyle="@Code.BgRun">
    <Description>包含简单图文的列表。需使用图片和文字结合展示信息。</Description>
    <RunContent>
        <List>
            <ListItem>
                <AvatarContent>
                    <img src="avatar.jpg"/>
                </AvatarContent>
                <TitleContent>这里是标题</TitleContent>
                <ChildContent>这里是文字描述</ChildContent>
            </ListItem>
            <ListItem>
                <AvatarContent>
                    <img src="avatar.jpg" />
                </AvatarContent>
                <TitleContent>这里是标题</TitleContent>
                <ChildContent>这里是文字描述</ChildContent>
            </ListItem>
            <ListItem>
                <AvatarContent>
                    <img src="avatar.jpg" />
                </AvatarContent>
                <TitleContent>这里是标题</TitleContent>
                <ChildContent>这里是文字描述</ChildContent>
            </ListItem>
        </List>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```html
<List>
    <ListItem>
        <AvatarContent><img src=""avatar.jpg""/></AvatarContent>
        <TitleContent>这里是标题</TitleContent>
        <ChildContent>这里是文字描述</ChildContent>
    </ListItem>
    <ListItem>
        <AvatarContent><img src=""avatar.jpg""/></AvatarContent>
        <TitleContent>这里是标题</TitleContent>
        <ChildContent>这里是文字描述</ChildContent>
    </ListItem>
    <ListItem>
        <AvatarContent><img src=""avatar.jpg""/></AvatarContent>
        <TitleContent>这里是标题</TitleContent>
        <ChildContent>这里是文字描述</ChildContent>
    </ListItem>
</List>
```
")
    </CodeContent>
</Example>

<Example Title="带头部及尾部的列表" RunStyle="@Code.BgRun">
    <Description>当列表需要展示头部或尾部信息时，配置 <code>HeaderContent</code> 和 <code>FooterContent</code> 的内容，并显示地使用 <code>ChildContent</code> 设置列表项。</Description>
    <RunContent>
        <List>
            <HeaderContent>这里是头部内容</HeaderContent>
            <FooterContent>这里是底部内容</FooterContent>
            <ChildContent>
                <ListItem>
                    <AvatarContent>
                        <img src="avatar.jpg" />
                    </AvatarContent>
                    <TitleContent>这里是标题</TitleContent>
                    <ChildContent>这里是文字描述</ChildContent>
                </ListItem>
                <ListItem>
                    <AvatarContent>
                        <img src="avatar.jpg" />
                    </AvatarContent>
                    <TitleContent>这里是标题</TitleContent>
                    <ChildContent>这里是文字描述</ChildContent>
                </ListItem>
                <ListItem>
                    <AvatarContent>
                        <img src="avatar.jpg" />
                    </AvatarContent>
                    <TitleContent>这里是标题</TitleContent>
                    <ChildContent>这里是文字描述</ChildContent>
                </ListItem>
            </ChildContent>
        </List>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```html
<List>
    <HeaderContent>这里是头部内容</HeaderContent>
    <FooterContent>这里是底部内容</FooterContent>
    <ChildContent>
        <ListItem>
            <AvatarContent><img src=""avatar.jpg""/></AvatarContent>
            <TitleContent>这里是标题</TitleContent>
            <ChildContent>这里是文字描述</ChildContent>
        </ListItem>
        <ListItem>
            <AvatarContent><img src=""avatar.jpg""/></AvatarContent>
            <TitleContent>这里是标题</TitleContent>
            <ChildContent>这里是文字描述</ChildContent>
        </ListItem>
        <ListItem>
            <AvatarContent><img src=""avatar.jpg""/></AvatarContent>
            <TitleContent>这里是标题</TitleContent>
            <ChildContent>这里是文字描述</ChildContent>
        </ListItem>
    </ChildContent>
</List>
```
")
    </CodeContent>
</Example>
<Example Title="带滚动事件的列表" RunStyle="@Code.BgRun">
    <Description>设置 <code>Height</code> 固定列表的高度(px)，超过高度自动带滚动条。</Description>
    <RunContent>
        <List Height="150">
            <ListItem>列表内容的描述性文字</ListItem>
            <ListItem>列表内容的描述性文字</ListItem>
            <ListItem>列表内容的描述性文字</ListItem>
            <ListItem>列表内容的描述性文字</ListItem>
            <ListItem>列表内容的描述性文字</ListItem>
            <ListItem>列表内容的描述性文字</ListItem>
            <ListItem>列表内容的描述性文字</ListItem>
            <ListItem>列表内容的描述性文字</ListItem>
            <ListItem>列表内容的描述性文字</ListItem>
            <ListItem>列表内容的描述性文字</ListItem>
            <ListItem>列表内容的描述性文字</ListItem>
            <ListItem>列表内容的描述性文字</ListItem>
            <ListItem>列表内容的描述性文字</ListItem>
            <ListItem>列表内容的描述性文字</ListItem>
            <ListItem>列表内容的描述性文字</ListItem>
            <ListItem>列表内容的描述性文字</ListItem>
            <ListItem>列表内容的描述性文字</ListItem>
        </List>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```html
<List Height=""150"">
    <ListItem>列表内容的描述性文字</ListItem>
    <ListItem>列表内容的描述性文字</ListItem>
    <ListItem>列表内容的描述性文字</ListItem>
    ...
</List>
```
")
    </CodeContent>
</Example>

<Example Title="具备加载行为的内容" RunStyle="@Code.BgRun">
    <Description>设置 <code>LoadingContent</code> 自定义加载行为的内容。</Description>
    <RunContent>
        <List>
            <LoadingContent>
                <Link Theme="Theme.Primary">点击加载列表</Link>
            </LoadingContent>
            <ChildContent>
                <ListItem>列表内容的描述性文字</ListItem>
                <ListItem>列表内容的描述性文字</ListItem>
                <ListItem>列表内容的描述性文字</ListItem>
                <ListItem>列表内容的描述性文字</ListItem>
                <ListItem>列表内容的描述性文字</ListItem>
                <ListItem>列表内容的描述性文字</ListItem>
            </ChildContent>
        </List>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```html
<List>
    <LoadingContent>
        <Link Theme=""Theme.Primary"">点击加载列表</Link>
    </LoadingContent>
    <ChildContent>
        <ListItem>列表内容的描述性文字</ListItem>
        <ListItem>列表内容的描述性文字</ListItem>
        <ListItem>列表内容的描述性文字</ListItem>
        <ListItem>列表内容的描述性文字</ListItem>
        <ListItem>列表内容的描述性文字</ListItem>
        <ListItem>列表内容的描述性文字</ListItem>
    </ChildContent>
</List>
```
")
    </CodeContent>
</Example>
